<!DOCTYPE html>
<html>
    <head>
        <title>$$$￥￥￥</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <script src="../node_modules/_vue@2.6.14@vue/dist/vue.min.js"></script>
    </head>
    <body>
        <!-- v-model-->
        <!-- 双向绑定
        用户在可以看见的界面中也就是V层视图层 改变了数据 那么data中的内容也会改变 视图变模型变
        反之也会让视图发生改变  模型变视图变 -->
        <div id="box">
           <h1 >{{text}}</h1>
           <input type="text" v-model="text">
           <h1 >{{text}}</h1>
           <h1 >{{text}}</h1>
           <h1 >{{text}}</h1>
           <h1 >{{text}}</h1>
           <h1 >{{text}}</h1>
           <h1 >{{text}}</h1>
           <h1 >{{text}}</h1>
           <!-- 数据劫取和发布者订阅者模式 -->
        </div>
    </body>
    <script>
       new Vue({
           data:{
               text:"124!"
           },
           el:"#box"
       })
    </script>
</html>